<template>
  <view class="preference">
    <view class="margin-box">
      <view class="scroll-box">
        <scroll-view :scroll-x="true" enable-flex class="scroll-view">
          <view class="row-view" v-for="(info, index) in showData.cardContent" :key="index">
            <view :class="content.backgroudColor == '#F8B840' ? 'name-view has-bg' : 'name-box'" v-for="(content, idx) in info.content" :key="idx">
              <view :class="'name-text omit2 ' + (content.color == '#F93F55' ? 'red' : '') + (content.color == '#767697' ? 'grey' : '')">{{ content.title }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
      <block v-if="showData.cardBtn && showData.cardBtn.length > 0">
        <view
          v-for="(btn, index) in showData.cardBtn"
          :key="index"
          class="sure-box"
          @click="sureClick(btn)"
          :data-spmCntSuffix="'ChatAiPage.hotelPriceParity@1.confirm@'"
          :data-custom="1"
          :data-spm="1"
        >
          {{ btn.text }}
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    showData: {
      type: Object,
    },
  },
  computed: {
  },
  data() {
    return {
    };
  },
  watch: {
  },
  methods: {
    sureClick(item) {
      if (!this.$isLogin()) {
				return;
			}
			const url = '/packageAI/pages/aiHotelPriceParity/aiHotelPriceParity'
			this.$navTo(url, item.argObj, 'navigateTo')
    },
  },
};
</script>

<style scoped lang="scss">
.preference {
  position: relative;
  .scroll-mask {
    position: absolute;
    width: 100%;
    height: 52rpx;
    bottom: 90rpx;
    z-index: 3;
  }
  .margin-box {
    padding: 0 3.4%;
    .scroll-box {
      display: flex;
      height: 538rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      // max-height: 807rpx;
    }
    .row-view {
      width: 25%;
      display: inline-block;
      flex-direction: column;
      align-items: center;
      white-space: pre-line;
      .name-view {
        width: 120rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: $sl-color-dark-grey;
        line-height: 24rpx;
        &.has-bg {
          width: 100%;
          height: 92rpx;
          // background: rgba(248, 184, 64, 0.1);
        }
        .img-view {
          width: 100rpx;
          height: 68rpx;
          font-size: 42rpx;
          color: $sl-color-dark-orage;
          line-height: 68rpx;
          border-radius: 10rpx;
          display: flex;
          justify-content: center;
          &.small {
            width: 42rpx;
            height: 42rpx;
            margin-bottom: 15rpx;
            margin-top: 11rpx;
          }
        }
        .name-text {
          width: 120rpx;
          height: 56rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: $sl-color-dark-orage;
          text-align: center;
          margin-top: 14rpx;
          line-height: 28rpx;
        }
      }
      .name-box {
        width: 100%;
        height: 62rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-bottom: 1rpx dashed #eeeeee;
        &.big {
          border-bottom: none;
        }
        .name-text {
          width: 120rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: $sl-color-dark-grey;
          text-align: center;
          &.grey {
            font-weight: 400;
            color: $sl-color-grey;
          }
          &.red {
            font-weight: 400;
            color: $sl-color-red;
          }
        }
        .btn {
          width: 112rpx;
          height: 48rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #E5EBFF;
          border-radius: 27rpx;
          font-size: 24rpx;
          font-weight: 600;
          color: $sl-color-blue;
          line-height: 24rpx;
          margin-top: 12rpx;
        }
      }
      .name-box:last-child {
        border-bottom: none;
      }
    }
    .scroll-view {
      white-space: nowrap;
    }
    .sure-box {
      width: 100%;
      height: 80rpx;
      border-radius: 26rpx;
      background: #131328;
      line-height: 80rpx;
      text-align: center;
      color: #B4EF4E;
      font-size: 28rpx;
      margin: 24rpx auto 0 auto;
      &.active {
        background: #E4E4F4;
        color: #B5B5D2;
      }
    }
  }
}
</style>
